<template >
    <div class="box">
            <div class="w1200" style = "width:100%;height:100%">
                <p class="newsNav">
                     <a @click = "toPage(it,'home')" target="_blank">首页</a>
                    </p>
                <div class="newsCon">
                    
                    <ul class="list clear">
                        <li v-for="(it,idx) in newsList" :key = "idx">
                            <span>{{ it.create_time }}</span><a >{{ it.company?it.company.name:'' }}</a>
                            <a @click = "toPage(it,'newsDetails')"  >{{ it.title }}</a>
                        </li>

                    </ul>
                    <!-- 翻页 -->
                    <div  id="AspNetPager1" class="Pager" v-show="newsList&&newsList.length>0">
                        <el-pagination
                            @current-change="handleCurrentChange"
                            :current-page.sync="page"
                            :page-size="size"
                            layout="prev, pager, next, jumper"
                            :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>
            <!-- 导航流 -->

    </div>
</template>
<script>
import pagePublic from "@/mixins/pagePublic.js";
import { mapMutations, mapState } from "vuex";
export default {
    name: "tem",
    mixins: [pagePublic],
    data() {
        return {

            // urls:{
            //     list: {
            //         url:this.$api.tem.list,
            //         method:"get",
            //         sync:false,
            //     },
            //     add:this.$api.tem.add,
            //     edit:this.$api.tem.edit,
            //     del:this.$api.tem.del
            // },
            newsList:[],
            page:1,
            size:20,
            total:0,


        }
    },
    computed: {
        ...mapState(['configInfo']),

    },
    created() {
        this.getNews()
    },
    methods: {
        ...mapMutations(['set_configInfo']),
        getNews(){
            this.$api.home.news({type:'news',limit:this.size,page:this.page}).then(res=>{
                this.newsList = res.data.data || []
                this.total = res.data.total || 0
            })
        },
        handleCurrentChange(e){
            if(this.page != e){
                this.page = e
                this.getNews()
            }
            
        },
        toPage(t,key){
            this.$router.push({path:'/'+key,query:{id:t.news_id}})
        }
    }
}
</script>
<style lang="scss" scoped>
ul,li{list-style: none;}
.Pager{text-align:center; padding:26px 0 0;}
.box{width: 100%;height:100vh; background: #F5F6F7; padding-bottom: 40px;}
.box .newsCon{height:85%; margin:0 auto 30px; display:flex;flex-direction: column;justify-content: space-between;  width:920px; background: #fff; border-radius: 8px; padding:20px 40px; box-shadow: 0 0 10px #e6e6e6;}
/* 导航 */
.box .newsNav{width:920px;margin:0 auto; padding: 30px 0; font-size: 17px;}
.box .newsNav a{color: #333; display: inline-block;}
.box .newsNav a:hover{color: #F36262;}
.box .newsNav a.current{color: #F36262;}
.box .newsNav span{padding: 0 5px;}
/* 列表 */
.newsCon .list li {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #e8e8e8;
    cursor: pointer;
}

.newsCon .list li:last-child {
    border: 0px;
}

.newsCon .list li a {
    font-size: 16px;
    float: left;
}

.newsCon .list li a:nth-child(2) {
    letter-spacing: 1px;
    margin-right: 8px;
}

.newsCon .list li a:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 500px;
    display: inline-block;
}

.newsCon .list li span {
    font-size: 16px;
    margin-right: 20px;
    color: #666;
    float: right;
}

.newsCon .list li:hover {
    background: #f6f6f6;
}

.newsCon .listPage {
    text-align: center;
    padding-top: 30px;
}

.newsCon .listPage a {
    display: inline-block;
    margin: 0 10px;
    border: 1px solid #ccc;
    font-size: 16px;
    padding: 0 12px;
    height: 36px;
    line-height: 36px;
    border-radius: 4px;
}

.newsCon .listPage a.active {
    border-color: #ff6666;
    background: #ff6666;
    color: #fff;
}

.newsCon .listPage a:hover {
    border-color: #ff6666;
    background: #ff6666;
    color: #fff;
}

/*详情页面*/
.newsCon .details h5 {
    font-size: 24px;
    text-align: center;
    padding: 30px 0;
}

.newsCon .details h6 {
    font-size: 16px;
    font-weight: normal;
    text-align: center;
    color: #666;
    padding-bottom: 30px;
    border-bottom: 1px solid #ccc;
}

.newsCon .details p {
    font-size: 16px;
    color: #333;
    text-indent: 2em;
}

.newsCon .details img {
    max-width: 96%;
}

.newsCon .updown {
    padding: 26px 0;
}

.newsCon .updown a {
    display: block;
    font-size: 16px;
    padding: 10px 0;
}

.newsCon .updown a:hover {
    color: #F36262;
}

.newsCon .likes p {
    background: #ff6666;
    line-height: 50px;
    height: 50px;
    font-size: 22px;
    color: #fff;
    border-radius: 4px;
    margin-bottom: 10px;
    text-indent: 1em;
}

.newsCon .likes ul li {
    width: 46%;
    float: left;
    padding: 10px 2%;
}

.newsCon .likes ul li a {
    font-size: 14px;
}

.newsCon .likes ul li a span {
    position: relative;
    top: -2px;
    margin-right: 12px;
}

.newsCon .likes ul li a:hover {
    color: #F36262;
}</style>